<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['采购管理','供应商管理']" currentMenu="供应商详情">
    </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">供应商编号</p>
          <p class="secondary-text">{{ detailInfo.supplierCode || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">供应商简称</p>
          <p class="secondary-text">{{ detailInfo.shortName || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">供应商全称</p>
          <p class="secondary-text">{{ detailInfo.fullName || '-' }}</p>
        </div>
        <div class="detail-item" style="width:10%;text-align:right">
          <flow-status ids="ERP_SUPPLIER" :flowStatusText="detailInfo.flowStatusText" :flowStatus="detailInfo.flowStatus"></flow-status>

          <!-- <p class="subtitle">状态</p>
          <p class="secondary-text">{{ detailInfo.flowStatusText || '-' }}</p> -->
        </div>
      </div>
    </div>
    <div class="cards-box">
      <a-card title="客户联系人" :bordered="false" style="margin-top:12px">
        <a-table
        row-key="id"
        size="middle"
        :scroll="{ x: '100%', y: 'calc(100vh - 366px)' }"
        :hideDefaultSelections="false"
        :columns="contactColumns"
        :dataSource="detailInfo.erpCustomerContactInfoVoList || []"
        :pagination="false"
        style="margin-top:12px"
      >
      </a-table>
      </a-card>
      <a-card title="供应商收款账户" :bordered="false" style="margin-top:12px">
        <a-table
        row-key="id"
        size="middle"
        :scroll="{ x: '100%', y: 'calc(100vh - 366px)' }"
        :hideDefaultSelections="false"
        :columns="accountColumns"
        :dataSource="detailInfo.erpSupplierAccountInfoVoList || []"
        :pagination="false"
        style="margin-top:12px"
      >
      </a-table>
      </a-card>
      <a-card title="其他信息" :bordered="false" style="margin-top:12px">
        <div class="item-wrap">
          <div class="detail-item" style="width:100%">
            <p class="subtitle">备注</p>
            <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
          </div>
        </div>
        <div class="item-wrap" style="margin-top:40px">
          <div style="width:100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
        </div>
      </a-card>
      <div style="padding-top: 12px">
        <Examine  v-if="detailInfo.flowInstId" type="2" :id="detailInfo.flowInstId" ref="examine" />
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import FlowStatus from '@/pubComponent/FlowStatus'
import Examine from '@/components/examine'
import { API } from '@/api/requestFzs'
export default {
  data() {
    return {
      jkeForm: {
        title: '供应商详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      detailInfo: {},
      contactList: [{id:1},{id:2}],
      contactColumns: [
        {
          title: '姓名',
          width: '25%',
          ellipsis: true,
          dataIndex: 'contactName',
        },
        {
          title: '职务',
          width: '25%',
          ellipsis: true,
          dataIndex: 'contactPost',
        },
        {
          title: '电话',
          width: '25%',
          ellipsis: true,
          dataIndex: 'contactPhone',
        },
        {
          title: '邮箱',
          width: '25%',
          ellipsis: true,
          dataIndex: 'contactEmail',
        },
      ],
      accountColumns: [
        {
          title: '户名',
          width: '33%',
          ellipsis: true,
          dataIndex: 'accountName',
        },
        {
          title: '开户行',
          width: '33%',
          ellipsis: true,
          dataIndex: 'accountBank',
        },
        {
          title: '账号',
          width: '34%',
          ellipsis: true,
          dataIndex: 'accountNumber',
        },
      ]
    }
  },
  components: {
    crumbs,
    FileDetail,
    FlowStatus,
    Examine
  },
  methods: {
    /* 面包屑返回 */
    goBack() {
      if (this.$route.query.backPath) {
        this.$router.go(-1)
        return
      }
      this.$router.push('/procurementManagement/supplierList')
    },
    initDetail(id) {
      this.jkeForm.visible = true
      API.erpSupplierQueryById({id}).then(res => {
        if (res.code == 200) {
          this.detailInfo = res.result
        }
      })
    }
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n+5) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 145px);
  overflow-y: scroll;
}
</style>
